<template>
	<view>
		留言内容：<input type="text" v-model="message"><button @click="add">留言</button>
		
		<uni-table border stripe emptyText="暂无更多数据" >
			<!-- 表头行 -->
			<uni-tr>
				<uni-th align="center">留言编号</uni-th>
				<uni-th align="center">留言内容</uni-th>
				<uni-th align="left">操作</uni-th>
			</uni-tr>
			<!-- 表格数据行 -->
			<uni-tr v-for="v in messageArr">
				<uni-td>{{v.id}}</uni-td>
				<uni-td>{{v.content}}</uni-td>
				<uni-td>
					<button size="mini" @click="del(v.id)">删除</button>
				</uni-td>
			</uni-tr>	
		</uni-table>
		<uni-pagination @change="pageChange" title="标题文字" show-icon="true" :pageSize="pageSize" :total="total" :current="pageNo"></uni-pagination>
	</view>
</template>
<script>
	const url=getApp().globalData.url;
	uni.showLoading({
		title:'数据加载中'
	});
	export default {
		data() {
			return {
				messageArr:[],
				message:'',
				pageNo:1,
				pageSize:5,
				total:0
			}
		},
		methods: {
			del(id){
				uni.showModal({
					title:'删除',
					content:'您确定要删除吗?',
					success:(res)=>{
						if (res.confirm) {
							console.log('用户点击删除');
							uni.request({
								url:url+'/deldata',
								method:'post',
								data:{
									id:id
								},
								success: (res) => {
									if(res.data.code==200){
										uni.showToast({
											title:'删除成功'
										})
										this.getData();
									}
								}
							})
						}
					}
				})
				
			},
			add(){
				uni.request({
					url:url+'/adddata',
					method:'post',
					data:{
						content:this.message
					},
					success:(res)=>{
						if(res.data.code==200){
							uni.showToast({
								title:'添加成功',
								position:'center'
							})
							this.getData();
						}
					}
				})
			},
			pageChange(e){
				this.pageNo=e.current;
				this.getData();
			},
			getData(){
				uni.request({
					url:`http://localhost/getdata?pageNo=${this.pageNo}&pageSize=${this.pageSize}`,
					success:(res)=>{
						this.messageArr=res.data.msg;
						this.message='';
						this.total=res.data.total;
						uni.hideLoading()
					}
				})
			}
		},
		onShow(){
			this.getData();
		}
	}
</script>

<style>

</style>
